<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/common/common.css" /><br />
		<style>
			.mui-row.mui-fullscreen>[class*="mui-col-"] {
				height: 100%;
			}
			
			.mui-col-xs-3,
			.mui-control-content {
				overflow-y: auto;
				height: 100%;
			}
			
			.mui-col-xs-3 {
				background: #F7F7F7;
			}
			
			.mui-table-view-cell>a:not(.mui-btn) {
				color: #999;
			}
			
			.mui-segmented-control .mui-control-item {
				line-height: 50px;
				width: 100%;
			}
			
			.mui-table-view-cell.mui-collapse .mui-table-view .mui-table-view-cell {
				padding-left: 30px;
			}
			
			.mui-table-view-cell.mui-checkbox.mui-left,
			.mui-table-view-cell.mui-radio.mui-left {
				padding-left: 16px;
			}
			
			.mui-checkbox input[type=checkbox]:before,
			.mui-radio input[type=radio]:before {
				font-size: 20px;
				line-height: 28px;
			}
			
			.mui-checkbox input[type=checkbox]:checked:before,
			.mui-radio input[type=radio]:checked:before,
			.mui-active>a:not(.mui-btn),
			.mui-table-view-cell.mui-collapse.mui-active>.mui-navigate-right:after,
			.mui-table-view-cell.mui-collapse.mui-active>.mui-push-right:after {
				color: #40CC8B;
			}
			
			.mui-table-view-cell.mui-collapse>.mui-navigate-right:after,
			.mui-table-view-cell.mui-collapse>.mui-push-right:after {
				color: #989898;
			}
			
			.mui-col-xs-9 {
				border-left: 1px solid #E6E6E6;
				background-color: #fff;
			}
			
			.mui-table-view-cell.mui-collapse .mui-table-view .mui-table-view-cell {
				background: #FCFCFC;
			}
			
			.mui-table-view:before,
			.mui-table-view-cell.mui-collapse .mui-table-view .mui-table-view-cell:after,
			.mui-table-view-cell:after,
			.mui-table-view:after {
				display: none;
			}
			
			.mui-active>a:not(.mui-btn) {
				background: #fff;
			}
			
			.mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item,
			.mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item.mui-active {
				line-height: 45px;
				border: none;
			}
			
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item {
				color: #949494;
			}
			
			.mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item.mui-active {
				background: #fff;
				color: #333;
				border-bottom: 1px solid #E5E5E5;
				border-top: 1px solid #E5E5E5;
			}
			
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active:first-child {
				border-top: none;
			}
			
			.nums,
			.zong {
				float: right;
				font-size: 12px;
				border-radius: 50%;
				background: #D8F4E7;
				line-height: 16px;
				color: #40cc8b;
				width: 16px;
				text-align: center;
				margin: 2px 0;
				margin-right: 20px;
				display: none;
			}
			
			.mui-checkbox {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			
			.footer {
				width: 100%;
				position: fixed;
				bottom: 0;
			}
			
			.footer>button {
				width: 100%;
				border-radius: 0;
				font-size: 18px;
				line-height: 34px;
			}
			
			.mui-navigate-right>div {
				display: inline-block;
			}
			
			.zong {
				position: absolute;
				z-index: 1000;
				top: 14px;
				left: 20px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">我要朗读</h1>
		</header>
		<div class="mui-content mui-row mui-fullscreen">
			<div class="mui-col-xs-3">
				<div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
					<!--<a class="mui-control-item mui-active" href="">选项1</a>
					<a class="mui-control-item" href="">选项2</a>
					<a class="mui-control-item" href="">选项3</a>-->
					<!--<a class="mui-control-item" href="" v-for="(nav,index) in nav" :class="{'mui-active':index ==0}">{{nav.readingCategoryName}}</a>-->
				</div>
			</div>
			<div id="segmentedControlContents" class="mui-col-xs-9">
				<!--<div class="mui-control-content mui-active" v-for="cls in cls">
					<ul class="mui-table-view mui-table-view-chevron">
						<li class="mui-table-view-cell mui-collapse checkeds" v-if="list.forGrade !=''">
							<a class="mui-navigate-right" href="#">{{list.forGrade}}<span class="nums">0</span></a>
							<ul class="mui-table-view mui-table-view-chevron">
								<li class="mui-table-view-cell mui-checkbox mui-left" v-for="items in list.readingCaseVos">
									<input name="checkbox" type="checkbox" :uid="items.id">
								</li>
							</ul>
						</li>
						<ul class="mui-table-view mui-table-view-chevron" v-else>
							<li class="mui-table-view-cell mui-checkbox mui-left" v-for="items in list.readingCaseVos">
								<input name="checkbox" type="checkbox">{{items.caseName}}
							</li>
						</ul>
					</ul>
				</div>-->
				<!--<div id="item2" class="mui-control-content">
					<ul class="mui-table-view mui-table-view-chevron">
						<li class="mui-table-view-cell mui-checkbox mui-left">
							<input name="checkbox" type="checkbox">静夜思
						</li>
						<li class="mui-table-view-cell mui-checkbox mui-left">
							<input name="checkbox" type="checkbox">早发白帝城
						</li>
						<li class="mui-table-view-cell mui-checkbox mui-left">
							<input name="checkbox" type="checkbox">九月九日忆山东兄弟
						</li>
						<li class="mui-table-view-cell mui-checkbox mui-left">
							<input name="checkbox" type="checkbox">静夜思
						</li>
						<li class="mui-table-view-cell mui-checkbox mui-left">
							<input name="checkbox" type="checkbox">早发白帝城
						</li>
						<li class="mui-table-view-cell mui-checkbox mui-left">
							<input name="checkbox" type="checkbox">九月九日忆山东兄弟
						</li>
						<li class="mui-table-view-cell mui-checkbox mui-left">
							<input name="checkbox" type="checkbox">静夜思
						</li>
						<li class="mui-table-view-cell mui-checkbox mui-left">
							<input name="checkbox" type="checkbox">早发白帝城
						</li>
						<li class="mui-table-view-cell mui-checkbox mui-left">
							<input name="checkbox" type="checkbox">九月九日忆山东兄弟
						</li>
					</ul>
				</div>
				<div id="item3" class="mui-control-content">
					<ul class="mui-table-view mui-table-view-chevron">
						<li class="mui-table-view-cell mui-checkbox mui-left">
							<input name="checkbox" type="checkbox">静夜思
						</li>
						<li class="mui-table-view-cell mui-checkbox mui-left">
							<input name="checkbox" type="checkbox">早发白帝城
						</li>
						<li class="mui-table-view-cell mui-checkbox mui-left">
							<input name="checkbox" type="checkbox">九月九日忆山东兄弟
						</li>
						<li class="mui-table-view-cell mui-checkbox mui-left">
							<input name="checkbox" type="checkbox">静夜思
						</li>
						<li class="mui-table-view-cell mui-checkbox mui-left">
							<input name="checkbox" type="checkbox">早发白帝城
						</li>
						<li class="mui-table-view-cell mui-checkbox mui-left">
							<input name="checkbox" type="checkbox">11
						</li>
						<li class="mui-table-view-cell mui-checkbox mui-left">
							<input name="checkbox" type="checkbox">九月九日忆山东兄弟
						</li>
						<li class="mui-table-view-cell mui-checkbox mui-left">
							<input name="checkbox" type="checkbox">静夜思
						</li>
						<li class="mui-table-view-cell mui-checkbox mui-left">
							<input name="checkbox" type="checkbox">早发白帝城
						</li>
					</ul>
				</div>-->
			</div>
		</div>
		<!--<div class="footer">
			<span class="zong">0</span>
			<button type="button" class="mui-btn mui-btn-success">确定添加</button>
		</div>-->
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/libs/vue.js"></script>
		<script src="../../js/libs/zepto_1.1.3.js"></script>
		<script src="../../js/common/common.js"></script>
		<script>
			mui.init({
				swipeBack: true,
				beforeback: function() {
					var list = plus.webview.currentWebview("addread.html").opener();
					mui.fire(list, 'refresh');
					return true;
				}
			});
			var addread = new Vue({
				el: '.mui-content',
				data: {
					nav: [],
					cls: [],

				},
				updated: function() {

				}
			})

			common.ajax("student/reading/category", {
				uid: common.uid,
				token: common.token
			}, function(data) {
				if(data.code == 200) {
					var temp = ""
					var list = ""
					for(var i = 0; i < data.data.length; i++) {
						temp += '<a class="mui-control-item" href="">' + data.data[i].readingCategoryName + '</a>'
						list += '<div class="mui-control-content"><ul class="mui-table-view mui-table-view-chevron"></ul></div>'
					}
					$("#segmentedControls").html(temp)
					$("#segmentedControlContents").html(list)
					$("#segmentedControls").find(".mui-control-item").eq(0).addClass("mui-active")
					tap()
				} else {
					mui.toast(data.message)
				}
			})

			function tap() {
				$(".mui-control-content").eq($("#segmentedControls").find(".mui-active").index()).addClass("mui-active")
				ajax($("#segmentedControls").find(".mui-active").text(), $("#segmentedControls").find(".mui-active").index())
				$(".mui-control-item").on("tap", function() {
					ajax($(this).text(), $(this).index())
					$(".mui-control-content").eq($(this).index()).addClass("mui-active").siblings().removeClass("mui-active")
				})
			}
			var kai = ""

			function ajax(texts, index) {
				if(kai.indexOf(texts) >= 0) {
					return
				}
				kai += texts
				common.ajax("student/reading/categoryCase", {
					uid: common.uid,
					token: common.token,
					categoryName: texts
				}, function(data) {
					var temp = ""
					console.log(data.data)
					for(var i = 0; i < data.data.length; i++) {
						var tex = ""
						for(var a = 0; a < data.data[i].readingCaseVos.length; a++) {
							tex += '<li class="mui-table-view-cell mui-checkbox mui-left" uid="' + data.data[i].readingCaseVos[a].uid + '" readid="' + data.data[i].readingCaseVos[a].id + '">' + data.data[i].readingCaseVos[a].caseName + '</li>'
						}
						if(data.data[i].forGrade != "") {
							temp += '<li class="mui-table-view-cell mui-collapse checkeds"><a class="mui-navigate-right" href="#"><span>' + data.data[i].forGrade + '</span><span class="nums">0</span></a><ul class="mui-table-view mui-table-view-chevron">' + tex + '</ul></li>'
						} else {
							temp += '<ul class="mui-table-view mui-table-view-chevron">' + tex + '</ul>'
						}
					}
					$(".mui-control-content").eq(index).html(temp)
					num()
				})
			}

			function num() {
				$(".checkeds").on("change", ".mui-checkbox", function() {
					var checkLength = 0
					var parent = $(this).parents(".checkeds")
					$.each(parent.find("input"), function(a, e) {
						if(parent.find("input")[a].checked) {
							++checkLength
						}
					});
					if(checkLength > 0) {
						parent.find(".nums").css("display", "block")
					} else {
						parent.find(".nums").css("display", "none")
					}
					parent.find(".nums").text(checkLength)
				})

				$(".mui-checkbox").on("change", function() {
					var totals = 0
					$.each($(".checkid"), function(a, e) {
						if($(".checkid")[a].checked) {
							++totals
						}
					});
					$(".zong").text(totals)
					if(totals > 0) {
						$(".zong").css("display", "block")
					} else {
						$(".zong").css("display", "none")
					}
				})
			}

			$(document).on("tap", ".mui-checkbox", function() {
				var obj = {
					"caseuid": $(this).attr("uid"),
					"plancaseuid": ''
				}
				common.open("play.html", "play.html", obj)
			})
		</script>
	</body>

</html>